<template>
  <div class="container">
    <h3>vue+openlayers: 鼠标点击播放视频</h3>
    <div id="vue-openlayers"></div>
    <el-button @click="add">加点</el-button>
    <div id="popup-box" class="ol-popup">
      <div id="popup-content">
        <video id="videoid" width="202" height="184" controls="controls" autoplay>
          <source src="" type="video/mp4" />
        </video>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile, Vector } from 'ol/layer'
import { XYZ } from 'ol/source'
import Overlay from 'ol/Overlay' // 弹出框
import { formLonLat, toLonLat, transform } from 'ol/proj'
import VectorLayer from 'ol/layer/Vector' // 矢量图层
import VectorSource from 'ol/source/Vector' // 矢量数据源
import Style from 'ol/style/Style' // 样式
import Icon from 'ol/style/Icon' // 图标样式
import Text from 'ol/style/Text' // 文本样式
import Fill from 'ol/style/Fill' // 填充样式
import Stroke from 'ol/style/Stroke' // 边线样式
import Feature from 'ol/Feature' // 要素
import Point from 'ol/geom/Point' // 点要素
export default {
  data() {
    return {
      map: null,
      overlayer: null,
      vsource: new VectorSource({}), // 矢量数据源
      cimgurl: null,
      cname: '',
      caddress: '',
      citys: [
        {
          name: '段',
          position: [116.397411, 39.909186],
          videourl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
          imgurl: require('../../assets/paidaxing.gif')
        },
        {
          name: '段',
          position: [115.397411, 37.909186],
          videourl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
          imgurl: require('../../assets/paidaxing.gif')
        }
      ]
    }
  },
  mounted() {
    this.initMap()
    // this.companyPoint()
  },
  methods: {
    // 城市点层
    companyPoint() {
      let features = [] // 要素数组
      let data = this.citys // 数据
      for (var i = 0; i < data.length; i++) {
        let feature = new Feature({
          geometry: new Point(data[i].position),
          citydata: data[i]
        })
        let img = data[i].imgurl
        feature.setStyle(this.pointStyle(img)) // 设置样式
        features.push(feature)
      }
      this.vsource.addFeatures(features) // 添加要素
    },

    // 点样式
    pointStyle(img) {
      let Styles = [] // 样式数组
      Styles.push(
        new Style({
          image: new Icon({
            src: img, // 图标路径
            anchor: [0.5, 1], // 锚点
            scale: 0.5 // 缩放比例
          })
        })
      )
      return Styles
    },

    // hover显示城市信息
    clickPoint() {
      // 设置浮层
      const box = document.getElementById('popup-box')
      this.overlayer = new Overlay({ // 浮层
        element: box,
        autoPan: { // 自动平移
          animation: { // 动画
            duration: 250 // 时长
          }
        }
      })
      this.map.addOverlay(this.overlayer) // 添加浮层

      // 显示内容
      let _that = this
      this.map.on('singleclick', e => {
        let feature = this.map.forEachFeatureAtPixel( // 获取点击的要素
          e.pixel, (feature, layer) => {
            return feature
          }
        )
        if (feature) {
          let cityInfo = feature.get('citydata') // 获取城市信息
          _that.cname = cityInfo.name
          _that.cimgurl = cityInfo.imgurl
          _that.overlayer.setPosition(e.coordinate) // 设置浮层位置
          document.getElementById('videoid').src = cityInfo.videourl // 设置视频路径
        } else {
          _that.overlayer.setPosition(undefined) // 设置浮层位置
        }
      })
    },

    add() {
      this.companyPoint()
    },

    // 初始化地图
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      let cityLayer = new VectorLayer({
        source: this.vsource
      })

      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer, cityLayer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 6,
          projection: 'EPSG:4326'
        })
      })
      this.clickPoint()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>